<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>时间轴</title>
    <link rel="shortcut icon" href="../static/image/favicon.ico" th:href="@{/image/favicon.ico}"/>
    <link rel="stylesheet" href="../static/css/semantic.min.css" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/icon.min.css" th:href="@{/css/icon.min.css}">
    <link rel="stylesheet" href="../static/css/mine.css" th:href="@{/css/mine.css}">
    <link rel='stylesheet' href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
    <link rel='stylesheet' href="../static/lib/swiper/css/swiper.min.css" th:href="@{/lib/swiper/css/swiper.min.css}">
    <link rel="stylesheet" href="../static/lib/swiper/css/style.css" th:href="@{/lib/swiper/css/style.css}">
</head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../static/lib/swiper/js/swiper.min.js" th:src="@{/lib/swiper/js/swiper.min.js}"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
<body>
    <!--导航 -->
    <nav th:replace="_fragments::menu(4)">
    </nav>

    <!-- 内容 -->
    <div id="waypoint" class="swiper container">
        <div class="timeline">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div th:each="timeline : ${timelines}" class="swiper-slide" th:style="'background-image:url(' + ${timeline.picInfo} + ');'" th:data-year="${#dates.format(timeline.createTime,'yyyy.MM.dd')}">
                        <div class="swiper-slide-content">
                            <span class="timeline-year" th:text="${#dates.format(timeline.createTime,'yyyy.MM.dd')}">2011</span>
                            <h5 class="timeline-title" th:text="${timeline.title}">Our nice super title</h5>
                            <p class="timeline-text" th:text="${timeline.desc}">Lorem ipsum dolor site amet, consectetur adipscing elit, sed do eisumod tempor incididut ut labore et dolore magna aliqua. Ut enim ad mimim venjam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>

    <!-- 辅助栏 -->
    <div id="help-bar" class="mine-padded mine-fixed mine-right-bottom" style="display: none">
        <div class="ui vertical icon buttons">
            <div id="toTop-button" href="#" class="ui icon button"><i class="chevron up icon"></i> </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer th:replace="_fragments::footer">
    </footer>





<script>
    var timelineSwiper = new Swiper ('.timeline .swiper-container', {
        direction: 'vertical',
        loop: false,
        speed: 1600,
        pagination: '.swiper-pagination',
        paginationBulletRender: function (swiper, index, className) {
            var year = document.querySelectorAll('.swiper-slide')[index].getAttribute('data-year');
            return '<span class="' + className + '">' + year + '</span>';
        },
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        breakpoints: {
            768: {
                direction: 'horizontal',
            }
        }
    });


    $('#toTop-button').click(function () {
        $(window).scrollTo(0,1000);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if(direction=='up'){
                $('#help-bar').hide(500)
            }else{
                $('#help-bar').show(100);
            }
            console.log('Scrolled to waypoint!')
        }
    });


</script>
</body>
</html>